<%--
  Created by IntelliJ IDEA.
  User: Ken
  Date: 2022/4/27
  Time: 9:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title>五子棋游戏</title>
    <style>
      * {
        padding: 0px;
        margin: 0px;
      }

      body {
        display: flex;
        flex-direction: row;
      }

      .left_div {
        width: 25%;
        height: 100%;
        /*background-color: aqua;*/
        border-right: 1px solid black;
      }

      .right_div {
        width: 75%;
        height: 100%;
        /*background-color: green;*/
      }

      .top_div {
        height: 20%;
        width: 100%;
        padding: 20px;
        /*background-color: antiquewhite;*/
      }

      .bottom_div {
        height: 80%;
        width: 100%;
        /*background-color: blueviolet;*/
        border-top: 1px solid black;
      }

      .header {
        width: 100px;
        height: 100px;
        border-radius: 50px;
      }

      .top_1_div {
        display: flex;
        height: 100%;
      }

      .user_info_span {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 20px;
      }

      .bottom_div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .btn_div {
        padding: 10px;
        color: white;
        background-color: #00a2d4;
        margin-bottom: 20px;
      }
    </style>

    <!-- 引入jquery -->
    <script src="js/jquery.min.js"></script>

    <!-- 弹出框的相关插件 -->
    <link rel="stylesheet" type="text/css" href="js/dialog/jquery-ui.min.css"/>
    <script type="text/javascript" src="js/dialog/jquery-ui-1.9.2.custom.min.js"></script>

    <!-- 上传插件的相关依赖 -->
    <link rel="stylesheet" type="text/css" href="js/webuploader/webuploader.css"/>
    <script type="text/javascript" src="js/webuploader/webuploader.min.js"></script>

    <!-- 自定义的js -->
    <script>
      //页面加载后触发
      $(function(){
          //初始化webuploader
          initWebUploader();
      });

      //初始化webuploader
      function initWebUploader(){
        //初始化webuploader
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: 'js/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: 'fileServlet?method=uploadHeader',
            // 选择文件的按钮。可选。
            pick: '#picker',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });

        //设置上传成功后的回调
        uploader.on("uploadSuccess", function(file, response){
            //转换成js对象
            var respFile = JSON.parse(response._raw);
            //获取上传后的文件名
            var imgName = respFile.imgName;
            //设置头像的回显
            $("#headerImg").attr("src", "fileServlet?method=showImg&imgName=" + imgName);
        });
      }

      /**
       * 打开充值的弹出框
       */
      function openDialog(){
          //打开弹出框
          $("#money_div").dialog({
             width: 600,
             height: 300,
             title: "选择充值金额"
          });
      }

      /**
       * 进行充值
       */
      function pay(){
         //获取充值金额
         var money = $("[name='money']").val();
         if (money.trim() == "") {
            alert("充值金额不能为空！");
            return null;
         }
         //转换成数字
         var num = parseInt(money);
         if(num > 0){
            //正常的数字 - ajax
            $.ajax({
               type: "POST",
               url: "orderServlet?method=insertOrders",
               data: {
                  money: num
               },
               success: function(data){
                  var oid = data.oid;
                  if (oid > 0) {
                     //下单成功 -> 关闭当前的弹出框 -> 调用支付宝
                     $("#money_div").dialog("close");
                     //打开一个新页签，访问支付的servlet
                     window.open("alipayServlet?method=pay&oid=" + oid);
                  } else {
                     //下单失败
                     alert("骚瑞，下单失败，有问题请联系管理员！");
                  }
               },
               dataType: "json"
            });


         } else {
            alert("充值金额不能为负数或者格式不正确！");
         }
      }
    </script>
  </head>
  <body>
    <!-- 左边的div -->
    <div class="left_div">

      <!-- 用户信息的div -->
      <div class="top_div">
        <div class="top_1_div">
          <!-- 头像 -->
          <c:if test="${login_user.header != null}">
            <!-- 自定义的头像 -->
            <img id="headerImg" class="header" src="fileServlet?method=showImg&imgName=${login_user.header}"/>
          </c:if>
          <c:if test="${login_user.header == null}">
            <!-- 默认头像 -->
            <img id="headerImg" class="header" src="img/default_header.jpg"/>
          </c:if>
          <span class="user_info_span">
          <!-- 昵称 -->
          ${login_user.nickname}

          <!-- 修改头像 -->
          <div id="picker">修改头像</div>

          <!-- 玩家等级 -->
          <span>
            level:
            <c:if test="${login_user.level eq 0}">
              初出茅庐
            </c:if>
            <c:if test="${login_user.level eq 1}">
              初出茅庐
            </c:if>
            <c:if test="${login_user.level eq 2}">
              初出茅庐
            </c:if>
          </span>

          <!-- 欢乐豆 -->
          <span>
            欢乐豆：${login_user.happyBean} &nbsp;&nbsp; <button onclick="openDialog();">充值</button>
          </span>

          <!-- 退出登录 -->
          <a href="playerServlet?method=logout">退出登录</a>
        </span>
        </div>
      </div>
      <!-- 菜单的部分div -->
      <div class="bottom_div">
        <div>
          <button class="btn_div" type="button" onclick="setIframe('roomcreate.jsp');">创建房间</button>
        </div>
        <div>
          <button class="btn_div" type="button" onclick="setIframe('roomlist.jsp');">查询房间</button>
        </div>
        <div>
          <button class="btn_div" type="button" onclick="setIframe('happybeanhistory.jsp');">欢乐豆流水</button>
        </div>
        <div>
          <button class="btn_div" type="button" onclick="setIframe('orderServlet?method=orderList');">订单详情</button>
        </div>
      </div>
    </div>
    <!-- 右边的div -->
    <div class="right_div" style="overflow: visible;">
      <!-- 工作区的iframe -->
      <iframe id="myframe" style="width: 100%; height: 100%; border: 0px; scrolling: no;"></iframe>
    </div>

    <!-- 这是需要弹出的内容 -->
    <div id="money_div" style="display: none;">
        输入充值金额：<input name="money"/>
        <br/>
        1元 = 100欢乐豆
        <br/>
        <button onclick="pay();">确认充值</button>
    </div>

    <script>
       function setIframe(path){
          //获取iframe 更新src
          $("#myframe").attr("src", path);
       }
    </script>
  </body>
</html>
